<template>
	<view class="content">
		<!-- <view class="pop_bg" v-if='head' @tap="closeNavSwitch" @touchmove.stop.prevent="moveHandle">
			<view class="pop_bg_item1">
				<view class="left_item" v-for="(item, index) in titledata" :key="index" @tap.stop="gotocreate(index)">
					<i :class="item.pic"></i>{{item.title}}
				</view>
			</view>
		</view> -->
		<view class="bg" v-if="datas == null">
			<image src="../../static/image/child-bg.png" mode=""></image>
			<view class="top joinTop">
				<view>您还未加入班级</view>
				<view class="joinClass" @click="joinClass">加入班级<i class="iconfont iconjiantou joinIcon"></i></view>
			</view>
		</view>
		<view v-else class="bg">
			<image src="../../static/image/child-bg.png" mode=""></image>
			<view class="top">
				<view class="class_name">{{datas.group_name}}</view>
				<view class="class_button" @tap="switchClass">切换班级</view>
				<view class="people">
					<view class="people_name">班主任：{{datas.nicheng}}</view>
					<view class="people_nums">人数：{{datas.count_num}}人</view>
				</view>
				<view class="create_time">创建时间：{{datas.creat_time}}</view>
			</view>
		</view>
		<view class="class_brief">
			<view class="border"></view>
			<view v-if="datas == null" class="class_brief_art">
				<text>班级简介：</text>
				你还未加入班级
			</view>
			<view v-else class="class_brief_art">
				<text>班级简介：</text>
				{{datas.group_brief}}
			</view>
		</view>
		<view class="hr"></view>
		<view class="class_content">
			<view class="icon" @tap="notice(datas.groupid)">
				<i class="iconfont icongonggao gonggao"></i>
				<view class="fonts">公告</view>
			</view>
			<view class="icon" @tap="task(datas.groupid)">
				<i class="iconfont iconrenwu_mian zuoye"></i>
				<view class="fonts">作业</view>
			</view>
			<view class="icon" @tap="zhihu(datas.groupid)">
				<i class="iconfont iconwenti1 wenti"></i>
				<view class="fonts">智互</view>
			</view>
			<view class="icon" @tap="exam(datas.groupid)">
				<i class="iconfont iconkaoshi_mian kaoshi"></i>
				<view class="fonts">测验</view>
			</view>
			<view class="icon" @tap="picture(datas.groupid)">
				<i class="iconfont iconxiangce xiangce"></i>
				<view class="fonts">相册</view>
			</view>
			<view class="icon" @tap="person(datas.groupid)">
				<i class="iconfont iconchengyuan chengyuan"></i>
				<view class="fonts">成员</view>
			</view>
		</view>
		<view class="hr"></view>
		<!-- 课表 -->
		<uni-table ref="uniTable"></uni-table>
		<!-- 课表 -->
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import uniTable from '@/components/table/table.vue';
	export default {
		components: {
			uniTable
		},
		data() {
			return {
				time: +new Date(),
				student_id: uni.getStorageSync('currentChild').student_id,
				is_quehuan: true,
				datas: {},
				clist: [],
				isShow: true, //用于隱藏评论的输入框
				content: '', //发表内容
				pcontent: '', //评论的内容
				head: false,
				titledata: [{
						pic: 'iconfont iconjiarubanji moreI',
						title: '加入班级'
					},
					{
						pic: 'iconfont icontuichubanji moreI',
						title: "退出班级"
					},
				],
				lists: [],
				Title: '',
				index: 0,
				groupid: '',
				currentNav: "groupclass",
				//课表 
				userInfo: {},
				parent_id: '',
				weekList: [],
				weekCurrent: 0,
				weekName: '周昵称',
				isWeek: false, // 周列表弹窗控制
				weekId: '',
				yearList: [],
				yearName: '学期昵称',
				yearCurrent: 0, // 年度选择索引
				isYear: false,
				typeId: '',

				timeList: [], //获取回来的时间段
				timecouml: [], //处理后的时间段
				coursesList: [], //课程表

				dayList: [{
					'name': '周一',
					'dayId': 1
				}, {
					'name': '周二',
					'dayId': 2
				}, {
					'name': '周三',
					'dayId': 3
				}, {
					'name': '周四',
					'dayId': 4
				}, {
					'name': '周五',
					'dayId': 5
				}, {
					'name': '周六',
					'dayId': 6
				}, {
					'name': '周日',
					'dayId': 7
				}],
				currentNum: 0,
				dataList: [],
				classroom_id: null,
				isFirst: true, //是否是第一次加载课表组件
			}
		},
		onPullDownRefresh() {
			this.getClass();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			this.getClass();
		},
		onLoad: function(e) {
			if (e.classroom_id) {
				this.classroom_id = e.classroom_id
			}
			if (e.index != null) {
				this.index = e.index;
				this.is_quehuan = false;
			}
			if(e.student_id) {
				this.student_id = e.student_id;
			}
			this.userInfo = uni.getStorageSync('userInfo');
			// this.show();
		},
		methods: {
			/* 获取班级列表 */
			getClass() {
				let data = {
					'student_id': this.student_id,
					'group_type': 1
				}
				if (this.classroom_id) {
					data.group_type = 2
					data.classroom_id = this.classroom_id
				}
				this.$zapi.apiPost('user/Grade.User/GradeList', data).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.length == 0) {
							this.datas = null;
						} else {
							this.lists = res.data.data; //我加入群列表的信息
							/**
							 * 获取缓存的班级id
							 */
							var groupid = uni.getStorageSync('groupid');
							if (this.is_quehuan) {
								for (let i = 0; i < this.lists.length; i++) {
									if (this.lists[i].groupid == groupid) {
										this.index = i;
										break;
									}
								}
							}
							var mygroup = {};
							mygroup.groupid = this.lists[this.index].groupid;
							this.groupid = this.lists[this.index].groupid;
							this.parent_id = this.lists[this.index].parent_id;

							mygroup.group_name = this.lists[this.index].group_name;
							mygroup.nicheng = this.lists[this.index].nicheng;
							var date = util.getFormatTime(this.lists[this.index].creat_time);
							mygroup.creat_time = date;
							mygroup.count_num = this.lists[this.index].count_num;
							mygroup.group_brief = this.lists[this.index].group_brief;
							mygroup.textbook = this.lists[this.index].textbook;
							this.datas = mygroup;
							/**
							 * 获取班级id存入缓存
							 */
							uni.setStorageSync('groupid', this.groupid);
							uni.setStorageSync('class_index',this.index);//班级索引
							uni.setStorageSync('groupname', this.lists[this.index].group_name);
							if (this.parent_id) {
								uni.setStorageSync('parentid', this.parent_id);
							}
							setTimeout(function() {
								if(!_this.isFirst) {
									_this.$refs.uniTable.getYear();
								}
							}, 10);
							var _this = this;
							setTimeout(function() {
								_this.isFirst = false;
							}, 100);
						}
					}
				});
			},

			//班级切换
			switchClass() {
				if (this.classroom_id) {
					uni.navigateTo({
						url: '../private-school/groups?student_id=' + this.student_id + '&classRoomId=' + this.classroom_id 
					})
				} else {
					uni.navigateTo({
						url: 'my-groups'
					})
				}
			},
			//跳转公告
			notice(groupid) {
				uni.navigateTo({
					url: '../group/group-notice?groupid=' + groupid
				})
			},
			//跳转相册
			picture(groupid) {
				uni.navigateTo({
					url: '../group/group-album?groupid=' + groupid
				})
			},
			//跳转成员
			person(e) {
				uni.navigateTo({
					url: '../group/group_member?groupid=' + e
				})
			},
			//作业跳转
			task(e) {
				uni.navigateTo({
					url: 'work_type?groupid=' + e
				})
			},
			//考试跳转
			exam(e) {
				uni.navigateTo({
					url: 'practise_task?groupid=' + e + '&type=0&is_exam_type=2'
				})
			},
			//智互
			zhihu(groupid) {
				uni.navigateTo({
					url: 'tclist?groupid=' + groupid
				})
			},
			closeNavSwitch() {
				this.head = false
				this.leftNavSwitch = false
			},
			/* 加入班级 */
			joinClass() {
				uni.navigateTo({
					url: 'group-list'
				})
			},
			gotocreate: function(index) {
				this.head = !this.head;
				if (index == 0) {
					this.joinClass();
				}
				if (index == 1) {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '你真的要退出吗？',
						success: function(res) {
							if (res.confirm) {
								var data = {
									groupid: _this.datas.groupid
								}
								_this.$zapi.apiPost('user/Grade.User/GradeOut', data).then((res) => {
									if (res.data.code !== 200) {
										return
									}
									uni.showToast({
										title: '退出成功!'
									})
									uni.redirectTo({
										url: 'group_class?index=0'
									})
								})
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			},
			showYearSelect: function() {
				if (this.yearList.length > 0) {
					this.isYear = !this.isYear
					this.isWeek = false
				} else {
					uni.showToast({
						title: '该班级还没有添加学期',
						icon: 'none'
					});
				}

			}
		}
	}
</script>

<style lang="scss">
	view {
		line-height: 1.2;
	}

	.pop_bg {
		position: fixed;
		z-index: 600;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
	}
	
	.pop_bg_item1 {
		position: absolute;
		right: 20upx;
		margin-top: 20upx;
		width: 30%;
		background-color: #ffffff;
		border-radius: 10upx;
	}
	
	.pop_bg_item1:before {
		content: "";
		position: absolute;
		display: inline-block;
		border-width: 18upx;
		border-style: solid;
		border-color: white transparent transparent transparent;
		transform: rotate(180deg);
		top: -30upx;
		right: 5%;
	}

	.left_item {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		font-size: 32upx;
		padding: 15upx 0;
		border-bottom: 1px solid #e5e5e5;
		color: #333333;
	}

	.left_item:last-child {
		border: none;
	}
	
	.moreI {
		font-size: 40upx !important;
		margin: 0 10upx 0 0 !important;
		-webkit-text-fill-color: #333333 !important;
	}

	.uni-page-head-btn {
		margin-right: 16upx !important;
	}

	.bg {
		height: 322upx;
		width: 750upx;
	}

	.bg image {
		height: 322upx;
		width: 750upx;
		position: absolute;
	}

	.top {
		margin-left: 46upx;
		position: relative;
	}

	.joinTop {
		margin: 0;
		text-align: center;
		color: #FFFFFF;
	}

	.joinTop view {
		font-size: 36upx;
		padding-top: 60upx;
		line-height: 1;
	}

	.joinClass {
		display: inline-flex;
		align-items: center;
		padding-top: 30upx !important;
	}

	.joinIcon {
		font-size: 50upx !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.class_name {
		font-size: 36upx;
		color: white;
		font-weight: bold;
		margin-top: 48upx;
		display: inline-block;
	}

	.class_button {
		font-weight: Regular;
		font-size: 28upx;
		padding: 14upx 18upx;
		background: #FFFFFF;
		color: #FF9900;
		display: inline-block;
		float: right;
		margin-right: 32upx;
		margin-top: 40upx;
	}

	.people,
	.create_time {
		font-size: 28upx;
		font-weight: Regular;
		color: white;
		margin-top: 34upx;
	}

	.create_time {
		margin-top: 30upx;
	}

	.people_name {
		display: inline-block;
	}

	.people_nums {
		float: right;
		margin-right: 32upx;
		display: inline-block;
	}

	.class_brief {
		margin: 34upx 0 30upx 46upx;
		display: flex;
	}

	.border {
		border-left: 2px solid #FF9900;
		height: 40upx;
	}

	.class_brief text {
		font-size: 34upx;
		font-weight: bold;
	}

	.class_brief_art {
		font-size: 34upx;
		font-weight: Regular;
		padding-left: 14upx;
	}

	.hr {
		background: #FAFAFA;
		height: 20upx;
	}

	.class_content {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-content: center;
		flex-wrap: wrap;

		i {
			font-size: 66upx;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-top: 32upx;
			text-align: center;
			line-height: 80upx;
		}

	}


	.zuoye {
		background-image: -webkit-linear-gradient(270deg, #C598FF, #A665FB);
	}

	.gonggao {
		background-image: -webkit-linear-gradient(270deg, #60CCFF, #0098FB);
	}

	.xiangce {
		background-image: -webkit-linear-gradient(270deg, #0FECB7, #00D5A2);
	}

	.chengyuan {
		background-image: -webkit-linear-gradient(270deg, #FFC061, #FF9900);
	}

	.kaoshi {
		background-image: -webkit-linear-gradient(270deg, #29E2B6, #00D5A2);
	}

	.wenti {
		background-image: -webkit-linear-gradient(270deg, #FFAA00, #FF9900);
	}

	.icon {
		display: inline-flex;
		flex-direction: column;
		width: 25%;
		height: 178upx;
	}

	.fonts {
		font-size: 34upx;
		font-weight: Regular;
		text-align: center;
		margin-bottom: 26upx;
	}

	/* 下拉框 */
	.tableContent{
		padding-bottom: 120upx;
	}
</style>
